<!--
  ~ Copyright (c) 2014-2020 Bjoern Kimminich.
  ~ SPDX-License-Identifier: MIT
  -->

<div fxLayout="column" fxLayoutGap="20px" class="main-wrapper">
      <div class="heading mat-elevation-z6">
         <div class="heading-main">{{"LABEL_ORDER_HISTORY" | translate}}</div>
      </div>
      <div *ngIf="!emptyState; else emptyResult" fxLayout="column" fxLayoutGap="20px">
         <div *ngFor="let order of orders">
            <div class="mat-elevation-z6 table-container custom-slate">
               <div class="heading">
                     <div fxLayout="row">
                        <div fxFlex="40%" fxLayout="column">
                              <div translate>LABEL_ORDER_ID</div>
                              <div>#{{ order.orderId }}</div>
                        </div>
                        <div fxFlex="15%" fxLayout="column">
                           <div translate>LABEL_TOTAL_PRICE</div>
                           <div>{{ order.totalPrice.toFixed(2) }}&curren;</div>
                        </div>
                        <div fxFlex="15%" fxLayout="column">
                              <div translate>LABEL_BONUS</div>
                              <div>{{ order.bonus }}</div>
                        </div>
                        <div fxFlex="20%">
                           <div *ngIf="!order.delivered" class="error" translate>LABEL_IN_TRANSIT</div>
                           <div *ngIf="order.delivered" class="confirmation" translate>LABEL_DELIVERED</div>
                        </div>
                        <div fxFlex="5%" fxLayoutAlign="end">
                              <button mat-icon-button aria-label="Track Your Order" matTooltip="{{ 'LABEL_TRACK_ORDER' | translate }}" matTooltipPosition="below" (click)= "trackOrder(order.orderId)">
                                 <mat-icon>
                                    local_shipping
                                 </mat-icon>
                              </button>
                           </div>
                        <div fxFlex="5%" fxLayoutAlign="end">
                           <button mat-icon-button aria-label="Print order confirmation" matTooltip="{{ 'PRINT_ORDER_CONFIRMATION' | translate }}" matTooltipPosition="below" (click)= "openConfirmationPDF(order.orderId)">
                              <mat-icon>
                                 note
                              </mat-icon>
                           </button>
                        </div>
                     </div>
               </div>
               <mat-table [dataSource]="order.products">
                  <ng-container matColumnDef="product">
                     <mat-header-cell *matHeaderCellDef translate fxFlex="40%">LABEL_PRODUCT</mat-header-cell>
                     <mat-cell *matCellDef="let element" fxFlex="40%">{{element.name}} </mat-cell>
                  </ng-container>
                  <ng-container matColumnDef="price">
                     <mat-header-cell *matHeaderCellDef translate fxFlex="15%">LABEL_PRICE</mat-header-cell>
                     <mat-cell *matCellDef="let element" fxFlex="15%">{{element.price}}&curren;</mat-cell>
                  </ng-container>
                  <ng-container matColumnDef="quantity">
                     <mat-header-cell *matHeaderCellDef translate fxFlex="15%">LABEL_QUANTITY</mat-header-cell>
                     <mat-cell *matCellDef="let element" fxFlex="15%">
                        <span>{{element.quantity}}</span>
                     </mat-cell>
                  </ng-container>
                  <ng-container matColumnDef="total price">
                     <mat-header-cell *matHeaderCellDef translate fxFlex="15%">LABEL_TOTAL_PRICE</mat-header-cell>
                     <mat-cell *matCellDef="let element" class="price-align" fxFlex="15%">{{ (element.total).toFixed(2) }}&curren;</mat-cell>
                  </ng-container>
                  <ng-container matColumnDef="review">
                        <mat-header-cell *matHeaderCellDef translate fxFlex="15%"></mat-header-cell>
                        <mat-cell *matCellDef="let element" fxFlex="15%">
                              <button mat-icon-button aria-label="Print order confirmation" matTooltip="{{ 'WRITE_REVIEW' | translate }}" matTooltipPosition="below"
                              (click)= "showDetail(element.id)">
                                 <mat-icon>
                                    rate_review
                                 </mat-icon>
                              </button>
                        </mat-cell>
                     </ng-container>
                  <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
                  <mat-row *matRowDef="let row; columns: tableColumns;"></mat-row>
               </mat-table>
            </div>
         </div>
      </div>
      <ng-template #emptyResult>
         <mat-card class="mat-elevation-z6 emptyState">
           <img alt=" No results found"
                class="img-responsive noResult"
                src="assets/public/images/products/no-results.png">
           <mat-card-title>
             <span class="noResultText" translate>
               NO_SEARCH_RESULT
             </span>
           </mat-card-title>
           <mat-card-content>
             <span class="noResultText" translate>
               NO_ORDERS_PLACED
             </span>
           </mat-card-content>
         </mat-card>
      </ng-template>
</div>
